<template>
	<view>
		<q-field label="圈子名称" v-model="form.name" :required="true" placeholder="请填写圈子名称"></q-field>
		<q-field label="圈子介绍" type="textarea" v-model="form.description" :required="true" placeholder="请填写圈子介绍,大于10个字符">
		</q-field>
		<view class="form-item">
			<view class="label">圈子头像</view>
			<q-upload :maxCount="1" :file="coverMediaList" ref="ossUpload" @success="coverSuccess" :autoUpload="true"
				:topicAvatar="true"></q-upload>
		</view>
		<view class="form-item">
			<view class="label">圈子背景</view>
			<q-upload :maxCount="1" :file="bgMediaList" ref="ossUpload" @success="bgSuccess" :autoUpload="true"
				:topicBg="true"></q-upload>
		</view>
		<!-- 提交按钮 -->
		<q-button shape="circle" @click="onSubmit">提交</q-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					description: '',
					cover_image: '',
					bg_image: ''
				},
				coverMediaList: [],
				bgMediaList: [],
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		onShow() {
			if (!this.userInfo) {
				uni.navigateTo({
					url: "/pages/user/login"
				})
			}
		},
		methods: {
			onSubmit() {
				if (!this.form.name) {
					this.$u.toast('请填写圈子名称');
					return;
				}

				if (this.form.description.length < 10) {
					this.$u.toast('请填写圈子介绍，大于10个字符');
					return;
				}

				if (!this.form.cover_image) {
					this.$u.toast('请上传圈子头像图');
					return;
				}

				if (!this.form.bg_image) {
					this.$u.toast('请上传圈子背景图');
					return;
				}

				uni.showLoading({
					mask: true,
					title: "提交中"
				})

				this.$H.post('topic/topicAdd', this.form).then(res => {
					if (res.code === 1) {
						this.$u.toast('成功创建圈子');

						this.$store.commit("setCurrentTopicId", res.result.id);

						uni.reLaunch({
							url: "/pages/index/index"
						})
					}

					uni.hideLoading()
				});
			},
			coverSuccess(e) {
				this.form.cover_image = e[0].url;
			},
			bgSuccess(e) {
				this.form.bg_image = e[0].url;
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.upload-wrap {
		padding: 30rpx;
	}

	.form-item {
		background-color: #fff;
		padding: 30rpx;

		.label {
			margin-bottom: 10rpx;
		}
	}
</style>